<template>
  <div>
    <el-form style="width: 400px;" ref="loginForm" :model="loginForm" label-width="90px" class="login-box" :rules="rules">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="账号" prop="uName">
        <el-input type="text" v-model="loginForm.uName" />
      </el-form-item>
      <el-form-item label="密码" prop="uPwd">
        <el-input type="password"  v-model="loginForm.uPwd"/>
      </el-form-item>
      <el-form-item>
        <el-space wrap :size="40">
          <div style="align-content: center">
            <el-radio-group v-model='u' size="small" class="view" @change="changeInput" style="background-color: #ffffff;">
              <el-radio-button label="用户"/>
              <el-radio-button label="租户"/>
              <el-radio-button label="管理员"/>
            </el-radio-group>
          </div>

          <span></span>
          <el-col id="3" v-on:click="onRetrieval()" style="color: #259cea; cursor: pointer" >找回密码</el-col>
          <el-row :gutter="0" style="margin-left: 10px">
            <el-button id="1" type="primary" v-on:click="classify()">登录</el-button>
          </el-row>
          <el-row :gutter="0" >
            <el-button id="2" type="primary" v-on:click="onRegis()">注册</el-button>
          </el-row>







        </el-space>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus'
import request from "@/util/request"
import {useRoute} from 'vue-router'
import router from "@/router";

export default {
  setup() {
    const route = useRoute()
    return {route}
  },
  name: 'Test',
  data() {
    return {
      u: '',
      radioValue: '',
      loginBg: 'url(' + require('../assets/login.jpg') + ')',
      loginForm: {
        uName: '',
        uPwd: ''
      },
      Admin:{
        adminName:'',
        password:'',
      },
      rules:{
        uName : [
          {required:true, message:'请输入账号',trigger:'blur'}
        ],
        uPwd : [
          {required:true, message:'请输入密码',trigger:'blur'}
        ]
      }
    }
  },
  methods: {
    classify(e) {
      document.getElementById("1").blur();
      if (this.radioValue === '用户') {
        this.onSubmit()
      } else if (this.radioValue === '租户') {
        this.ten()
      }else if (this.radioValue === '管理员') {
        this.toAdmin()
      }else {
        ElMessage({
          showClose: true,
          message: '你还没选择用户属性！',
          type: 'error'
        })
      }
    },
    onSubmit() {
      this.$refs.loginForm.validate(valid=>{
        if(valid) {
          console.log(1)
          this.$axios.post('http://localhost:8090/user/userLogin/', {
            userName: this.loginForm.uName,
            password: this.loginForm.uPwd
          }).then(response => {
            if (response.data.code === "200") {
              ElMessage({
                showClose: true,
                message: '登录成功',
                type: 'success'
              })
              this.$cookies.set("value",response.data.data)
              router.push('/groupManage')
              console.log("11111")
            } else {
              ElMessage.error('登录失败,账号名或密码错误！')
            }
          })
        }else{
          console.log(2)
        }
      })
    },
    ten() {
      let config = {
        headers: {
          "Content-Type": "multipart/form-data"
        }
      };
      let formData = new FormData();
      formData.append("tenantName", this.loginForm.uName)
      formData.append("password", this.loginForm.uPwd)
      this.$axios.post('http://localhost:8090/tenant/login/', formData, config).then(response => {
        console.log(response.data)
        if (response.data.code === "200") {
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
          this.$cookies.set("value",response.data.data)
          router.push("/Tenant-main")
        } else {
          ElMessage.error('登录失败,账号名或密码错误！')
        }
      })
    },
    toAdmin(){

      request.post('http://localhost:8090/admin/loginAdmin/', {
        adminName:this.loginForm.uName,
        password:this.loginForm.uPwd
      }).then(response => {
        console.log(response.data)
        if (response.data.code === "200") {
          ElMessage({
            showClose: true,
            message: '登录成功',
            type: 'success'
          })
          this.$cookies.set("value",response.data.data)
          router.push("/AdminTenantManage")
        } else {
          ElMessage.error('登录失败,账号名或密码错误！')
        }
      })

    },
    onRegis() {
      request.post('http://localhost:8090/register/registerStart', {
        type: this.radioValue
      })
      router.push('/regis')
    },
    changeInput(index) {
      this.radioValue = index
    },
    onRetrieval() {
      router.push('/retrieval')
    }
  },
  mounted() {
    document.body.style.backgroundSize = '100%'
    document.body.style.backgroundImage = this.loginBg
  },
  beforeUnmount() {
    document.body.style.backgroundImage = ''
  }
}
</script>

<style scoped>
.login-box {
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 120px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  box-shadow: 0px 0 25px black;
  background-color: white;
}

.view {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}

.login-title {
  text-align: center;
  margin: 0 auto 30px auto;
  color: #303133;
}

/deep/ .el-form-item__label {
  font-size: 18px;
  color: black;
}
</style>

